<template>
  <view class="content">
    <view class="btn"> <van-button type="primary" @click="show = true"> 点我日历就会出来 </van-button></view>
    <view v-if="date">您选择的日期是: {{ date }}</view>
    <view>
      <van-calendar :show="show" @close="onClose" @confirm="onConfirm" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
      show: false,
      date: null
    };
  },
  onShow() {
    // this.show = true;
  },
  methods: {
    formatDate(date) {
      date = new Date(date);
      return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
    },
    onClose() {
      this.show = false;
      this.date = null;
    },
    onConfirm(event) {
      this.show = false;
      this.date = this.formatDate(event.detail);
    }
  }
};
</script>

<style>
.content {
  text-align: center;
}
.btn {
  margin-top: 20rpx;
}
</style>
